import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import WindiCSS from "vite-plugin-windicss";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import UnpluginSvgComponent from "unplugin-svg-component/vite";
import path from "path";
import Inspect from "vite-plugin-inspect";

export default defineConfig({
  base: "./",
  resolve: {
    alias: {
      "@": path.resolve("src"),
    },
  },
  plugins: [
    vue(),
    WindiCSS(),
    Inspect(),
    AutoImport({
      dts: "./types/auto-imports.d.ts",
      eslintrc: { enabled: true },
    }),
    Components({
      extensions: ["vue", "jsx", "tsx"],
      dts: "./types/components.d.ts",
    }),
    UnpluginSvgComponent({
      iconDir: [path.resolve(__dirname, "./src/assets/icons/common")],
      dts: true,
      preserveColor: path.resolve(__dirname, "./src/assets/icons/common"),
      dtsDir: path.resolve(__dirname, "./types"),
      svgSpriteDomId: "my-svg-id",
      // prefix: "icon",
      componentName: "MySvgIcon",
      symbolIdFormatter: (svgName, prefix) => {
        const nameArr = svgName.split("/");
        if (prefix) nameArr.unshift(prefix);
        return nameArr.join("-").replace(/\.svg$/, "");
      },
      optimizeOptions: undefined,
      vueVersion: 3,
      scanStrategy: "component",
      treeShaking: true,
    }),
  ],
});
